<template>
	<view class="container-bg">
		<u-navbar title="我的订单" :autoBack="true" placeholder bgColor="transparent"></u-navbar>
		<u-sticky customNavHeight="44">
			<u-tabs :current="current" @change="hanldeTabs" :activeStyle="{ color: '#df0007',fontSize: '32rpx' }"
				:inactiveStyle="{ fontSize: '28rpx' }" :itemStyle="{ height: '68rpx',fontSize: '24rpx' }"
				:scrollable="true" :lineWidth="0" :duration="200" :list="tabList"></u-tabs>
		</u-sticky>
		<!-- 订单列表 -->
		<view class="pad-32">
			<view class="bg-white pad-24 mar-bottom-24" v-for="(item,index) in list" :key="index"
				@click="hanldeOrderInfo(item.id)">
				<view class="centerY betweenX">
					<view v-if="item.pay_status == 1" class="color-theme centerY font-28">
						<text>待支付</text>
						<u-count-down @finish="hanldeFinish(index)" :time="countDown(item.end_pay_at,newTime)"
							format="mm:ss"></u-count-down>
					</view>
					<view v-if="item.pay_status == 2" class="color-sessucc font-28">支付成功</view>
					<view v-if="item.pay_status == 3" class="color-grey font-28">已取消</view>
					<view v-if="item.pay_status == 4" class="color-grey font-28">订单超时已取消</view>
					<view v-else class="color-theme font-28"></view>
					<u-icon name="arrow-right" size="4"></u-icon>
				</view>
				<view class="centerY mar-top-24">
					<image mode="aspectFill" class="cover radius16"
						:src="item.ext_info.product_info.cover+'?image_process=resize,l_350'" />

					<view class="betweenY flex-w list-height mar-left-24">
						<view class="font-28 multi2">{{item.ext_info.product_info.name}}</view>
						<view class="centerY betweenX font-24">
							<view class="color-grey">{{ $u.timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss') }} </view>
							<view>￥{{item.amount}}</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="list.length == 0" text=" " icon="../../static/image/empty.png"></u-empty>
			<u-loadmore margin-top="30" v-if="list.length > 0" :status="pageStatus" color="#7a7a7a"
				iconColor="#7a7a7a" />
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		userOrderList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				tabList: [{
						name: '全部',
					},
					{
						name: '已完成',
						pay: 2
					},
					{
						name: '待支付',
						pay: 1
					},
					{
						name: '超时取消',
						pay: 4
					},
					{
						name: '已取消',
						pay: 3
					}
				],
				ps: 10,
				page: 1,
				// 加载中状态
				pageStatus: 'loadmore',
				// 订单数据
				list: [],
				// 当前时间
				newTime: parseInt(new Date().getTime() / 1000),
				// 订单状态
				payStatus: '',
				// 选中默认的 tab
				current: 0
			}
		},
		onLoad(options) {
			this.current = Number(options.current);
			this.payStatus = this.tabList[options.current].pay;
			this.getOrderList();
		},
		// 上拉加载更懂
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getOrderList();
			}
		},
		methods: {
			// 切换订单状态
			hanldeTabs(item) {
				this.current = item.index;
				this.list = [];
				this.page = 1;
				this.payStatus = item.pay;
				this.getOrderList();
			},
			// 倒计时结束
			hanldeFinish(index) {
				this.list[index].pay_status = 4;
				this.newTime = parseInt(new Date().getTime() / 1000);
			},
			// 倒计时计算 time - time1 *1000
			countDown(time, time1) {
				return (time - time1) * 1000;
			},
			// 跳转去详情
			hanldeOrderInfo(id) {
				uni.navigateTo({
					url: '/pages/shopmall/orderinfo?id=' + id
				})
			},
			// 获取我的订单
			getOrderList() {
				this.pageStatus = 'loading';
				let data = {
					ps: this.ps,
					page: this.page,
					pay_status: this.payStatus,
					scene_arr: ['e_trade']
				}
				userOrderList(data).then(res => {
					this.pageStatus = 'loadmore';

					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);
					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-bg {
		min-height: 100vh;
		background: $uni-bg-page;

		.cover {
			width: 160rpx;
			height: 160rpx;
		}

		::v-deep .u-count-down__text {
			display: block;
			width: 110rpx;
			line-height: 34rpx;
			font-size: 28rpx;
			color: $uni-theme;
			margin-left: 10rpx;
		}

		::v-deep .u-sticky {
			background-size: cover;
			background-repeat: no-repeat;
		}

		.item>image {
			display: block;
			width: 100%;
			height: 300rpx;
		}



		.list-height {
			height: 160rpx;
		}

		.color-sessucc {
			color: #5cb85c;
		}
	}
</style>